<template>
    <div class="design-item">
        <div class="design-item-controller">
            <div class="design-item-controller-handle">
                <div class="design-component-search-preview" :style="{backgroundColor: bgColor}">
                    <div class="search-preview-input-wrap">
                        <i class="search-preview-icon"></i>
                        <input type="search" placeholder="商品搜索" class="search-preview-input" readonly>
                    </div>
                </div>
            </div>
            <slot name="menu"></slot>
        </div>
        <div class="design-item-editor" v-show="show && !showAddMenuGroup">
            <div>
                <div class="design-item-editor-title">商品搜索</div>
                <div class="editor-group">
                    <div class="editor-group-label">背景色：</div>
                    <div class="editor-group-control">
                        <input class="color-picker-preview" ref='bgColor' v-model="bgColor">
                    </div>
                </div>
            </div>
        </div>
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>

    /**
     * 默认的数据格式
     */
    var defaultDataFormat = {
        // 文案
        bgColor: '#FFFFFF',
        type: 'search'
    }
    export default {
        name: "nc-design-item-search",
        otherInfo: {
            title: '商品搜索',
            type: 'search',
            group: 2,
            max: 0
        },
        components: {},
        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        },
        data() {
            let data = !Nc.isEmpty(this.options) ? {
                bgColor: this.options.bgColor,
                type: defaultDataFormat.type
            } : ($.extend(true, {}, defaultDataFormat))

            let customData = {}
            return $.extend({}, data, customData)
        },
        mounted(){
            var self = this
            $(this.$refs.bgColor).spectrum({
                optionTemplate: 2,
                defaultColor: '#FFFFFF' ,
                move: function (color) {
                    self.bgColor = color.toHexString();
                } ,

                change: function (color) {
                    self.bgColor = color.toHexString();
                } 

            })
        } ,
        methods: {
            /**
             * 获取当前数据
             */
            getCurrentData () {
                return {
                    bgColor: this.bgColor,
                    type: this.type
                }
            }
        }
    };
</script>